<template>
  <div class="main">
    <div class="mainTop">
      <div>
        <span>定时类型：</span>
        <div>
          <input type="radio" name="timePointType" /><span> 普通类</span>
        </div>
        <div>
          <input type="radio" name="timePointType" /><span> 插播类</span>
        </div>
      </div>
      <div>
        <span>歌曲类型：</span>
        <div><input type="radio" name="songType" /><span> 背景音乐</span></div>
        <div><input type="radio" name="songType" /><span> 无</span></div>
      </div>
      <div>
        <span>播放模式：</span>
        <div><input type="radio" name="playMode" /><span> 顺序</span></div>
        <div><input type="radio" name="playMode" /><span> 随机</span></div>
        <div><input type="radio" name="playMode" /><span> 循环</span></div>
      </div>
      <div class="input">
        <span>结束时间：</span>
        <div><input type="text" class="numberInput" /><span> 时</span></div>
        <div><input type="text" class="numberInput" /><span> 分</span></div>
        <div><input type="text" class="numberInput" /><span> 秒</span></div>
      </div>
      <div><button class="extraRunning">额外运行时间管理</button></div>
      <div class="buttons"><button>+</button><button>-</button></div>
    </div>
    <div class="mainBotttom">
      <div class="left">
        <div class="title">节目源选择：</div>
        <div class="select">音乐文件夹选择: <input type="file" /></div>
        <div class="table">
          <el-table :data="tableData1" border style="width: 100%; height: 100%">
            <el-table-column type="index" label="序号" min-width="10">
            </el-table-column>
            <el-table-column prop="selected" label="选择" min-width="10">
            </el-table-column>
            <el-table-column prop="name" label="名称" min-width="40">
            </el-table-column>
            <el-table-column prop="time" label="时长" min-width="15">
            </el-table-column>
          </el-table>
        </div>

        <div class="underTips">
          <span>普通类可以打断普通类</span
          ><span>插播类可以优先（覆盖）普通类</span>
        </div>
      </div>
      <div class="middle"><button>>>></button><button>&lt&lt&lt</button></div>
      <div class="right">
        <div class="title">定时音乐列表：</div>
        <div class="table">
          <el-table :data="tableData2" border style="width: 100%; height: 100%">
            <el-table-column type="index" label="序号" min-width="10">
            </el-table-column>
            <el-table-column prop="selected" label="选择" min-width="10">
            </el-table-column>
            <el-table-column prop="name" label="名称" min-width="40">
            </el-table-column>
            <el-table-column prop="time" label="时长" min-width="15">
            </el-table-column>
          </el-table>
        </div>
        <div class="buttons">
          <button @click="lastStep">上一步</button><button @click="nextStep">下一步</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup >
import { inject, ref } from "vue";
import { useRouter } from "vue-router";
import fenquVue from "./fenqu.vue";
import editTime from "./editTime.vue";
const tableData1 = ref([
  {
    selected: "√",
    name: "我们不一样.MP3",
    time: "04:33",
  },
]);
const tableData2 = ref([
  {
    selected: "√",
    name: "我们不一样.MP3",
    time: "04:33",
  },
]);

const changeComponent=inject('changeComponent');
const lastStep=()=>{
  changeComponent({Components:editTime});
}
const nextStep=()=>{
  changeComponent({Components:fenquVue});
}
</script>
<style lang="less" scoped>
@import url("./less/editMusic.less");
</style>